<template>
  <div class="setting">
    <div>
      <!-- <el-button type="primary" size="mini" @click="downloadFun"
        >下载</el-button
      > -->
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="课程资料" name="pdf">
        <div class="flex-center" style="margin-bottom: 20px;">
          <el-input v-model="key" size="mini" style="width: 120px;" placeholder="关键字/词查询"></el-input>
          <el-button class="ml0" size="mini" type="primary" @click="refreshTable('课程资料')"
            >查询</el-button
          >
        </div>
        <div class="consultation-block">
          <div class="table">
            <el-table size="mini" :data="tableData" style="width: 100%">
              <el-table-column label="序号" type="index"> </el-table-column>
              <el-table-column prop="name" label="课程名称"> </el-table-column>
              <el-table-column prop="user.nickname" label="教师">
              </el-table-column>
              <el-table-column prop="fileList" label="学习资料">
                <template slot-scope="scope">
                  <div :key="index" v-for="(file, index) in scope.row.fileList" style="color: #0e2499;cursor: pointer;" @click="downloadFun(file)">
                    {{file.name}}
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div class="pagination">
            <el-pagination
              background
              layout="prev, pager, next"
              :current-page.sync="currentPage"
              @current-change="refreshTable"
              :page-size="pageSize"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="教学视频" name="video">
        <div class="flex-center" style="margin-bottom: 20px;">
          <el-input v-model="key" size="mini" style="width: 120px;" placeholder="关键字/词查询"></el-input>
          <el-button class="ml0" size="mini" type="primary" @click="refreshTable('教学视频')"
            >查询</el-button
          >
        </div>
        <div class="consultation-block">
          <div class="table">
            <div class="video" v-for="item in tableData">
              <div class="name mb10">{{ item.name }}</div>
              <div class="mb10" style="color: #978686;">教师: {{ item.user.nickname }}</div>
              <!-- <h4>视频资料</h4> -->
              <!-- <video width="320" height="240" controls>  
                  <source :src="file.url" type="video/mp4">  
                </video> -->
                <div v-for="file in item.fileList">
                  <video-player
                    v-if="file.playerOptions"
                    class="video-player vjs-custom-skin"
                    ref="videoPlayer"
                    :playsinline="true"
                    :options="file.playerOptions"
                  >
                  </video-player>
                </div> 
            </div>
          </div>

          <div class="pagination">
            <el-pagination
              background
              layout="prev, pager, next"
              :current-page.sync="currentPage"
              @current-change="refreshTable"
              :page-size="pageSize"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getCourse, addCourse, download } from "../service.js";
import { VueEditor } from "vue2-editor";

export default {
  components: { VueEditor },
  data() {
    return {
      tableData: [],
      isVisible: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      addForm: {
        fileList: [],
      },
      map: null,
      userId: "",
      typeList: ["课程资料", "教学视频"],
      activeName: "pdf",
      key: ''
    };
  },
  mounted() {
    this.refreshTable("课程资料");
  },
  methods: {
    handleAddClose() {
      this.isVisible = false;
    },
    addCourse() {
      this.addForm = {
        name: "",
        content: "",
        fileList: [],
        userId: "",
        type: "课程资料",
      };
      this.isVisible = true;
      this.$nextTick(() => {
        this.$refs.upload.clearFiles();
      });
    },
    handleAvatarSuccess(info) {
      this.addForm.fileList.push(info);
    },
    refreshTable(type) {
      let params = {
        page: this.currentPage,
        pageSize: this.pageSize,
        type,
      };
      if (this.key) {
        params.key = this.key
      }
      getCourse(params).then((res) => {
        this.tableData = res.data.data.map((v) => {
          return {
            ...v,
            fileList: JSON.parse(v.fileList),
          };
        });
        if (type == '教学视频') {
          console.log(type)
          this.tableData.forEach((v, i) => {
            console.log(v)
            this.tableData[i].fileList.forEach((f, i2) => {
              console.log(this.tableData[i].fileList[i2])
              this.tableData[i].fileList[i2].playerOptions = {
                sources: [
                  {
                    type: "video/mp4",
                    src: f.url
                  },
                ]
              }
            })
          })
          console.log(this.tableData)
        }
        this.total = res.data.total;
      });
    },
    async downloadFun(file) {
      const response = await fetch(
        `http://localhost:3000/download/${file.url}`,
        {
          method: "POST",
          mode: "cors", // 如果你的后端支持跨域，这里需要设置为 'cors'
        }
      );
      const downloadLink = document.createElement("a");
      const blob = await response.blob(); // 获取 Blob 对象
      const urlCreator = window.URL || window.webkitURL;
      const objectUrl = urlCreator.createObjectURL(blob);

      // 设置下载链接的 href 和下载文件名
      downloadLink.href = objectUrl;
      downloadLink.download = file.name; // 你可以根据需要设置文件名

      // 触发下载
      document.body.appendChild(downloadLink);
      downloadLink.click();

      // 清理
      document.body.removeChild(downloadLink);
      urlCreator.revokeObjectURL(objectUrl);
    },
    handleClick() {
      this.currentPage = 1;
      this.key = ''
      this.refreshTable(this.activeName == "pdf" ? "课程资料" : "教学视频");
    },
  },
};
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border: 1px dashed gray;
  text-align: center;
}
.avatar {
  width: 60px;
  height: 60px;
  display: block;
}
.el-icon-circle-close {
  position: absolute;
  top: -5px;
  right: -5px;
  cursor: pointer;
  color: red;
}
#map {
  width: 100%;
  height: 600px;
}
.video {
  padding: 20px;
  border: 1px solid lightblue;
  border-radius: 10px;
  margin-bottom: 20px;
  .name {
    font-weight: bold;
  }
}
.mb10 {
  margin-bottom: 10px;
}
</style>
